<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>商品列表</title>
    <meta name="description" content="商品列表">
    <meta name="keywords" content="商品列表">

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">


    <link href="/css/zpageNav.css" rel="stylesheet" />
    <script src="/plugins/vue/vue.js"></script>
    <script src="/plugins/vue/zpageNav.js"></script>
    <script src="/plugins/vue/axios-0.18.0.js"></script>
</head>

<body class="hold-transition skin-purple sidebar-mini" >

<div class="wrapper" >

    <div id="app">
        <!-- 页面头部 -->
        <header class="main-header">


            <!-- Logo -->
            <a href="index.html" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>数据</b></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>运营</b>后台管理</span>
            </a>


            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>

                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="../img/logo.png" class="user-image" alt="User Image">
                                <span class="hidden-xs">ITCAST</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- User image -->
                                <li class="user-header">
                                    <img src="../img/logo.png" class="img-circle" alt="User Image">

                                    <p>
                                        ITCAST - 数据管理员
                                        <small>最后登录 11:20AM</small>
                                    </p>
                                </li>
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a href="#" class="btn btn-default btn-flat">修改密码</a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="#" class="btn btn-default btn-flat">注销</a>
                                    </div>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>
        </header>
        <!-- 页面头部 /-->



        <!-- 导航侧栏 -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="../img/logo.png" class="img-circle" alt="User Image">
                    </div>
                    <div class="pull-left info">
                        <p>ITCAST</p>
                        <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                    </div>
                </div>

                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu">
                    <li class="header">菜单</li>

                    <li id="admin-index"><a href="index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a></li>

                    <!-- 菜单 -->
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-folder"></i> <span>商品管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">

                            <li id="admin-login">
                                <a href="spu-datalist.html">
                                    <i class="fa fa-circle-o"></i> 商品列表
                                </a>
                            </li>

                            <li id="admin-register">
                                <a href="all-admin-register.html">
                                    <i class="fa fa-circle-o"></i> 待审核商品
                                </a>
                            </li>

                            <li id="admin-category">
                                <a href="all-admin-register.html">
                                    <i class="fa fa-circle-o"></i> 分类管理
                                </a>
                            </li>

                            <li id="admin-404">
                                <a href="all-admin-404.html">
                                    <i class="fa fa-circle-o"></i> 秒杀商品
                                </a>
                            </li>

                        </ul>
                    </li>



                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-pie-chart"></i> <span>订单管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">

                            <li id="charts-chartjs">
                                <a href="order-datalist.html">
                                    <i class="fa fa-circle-o"></i> 订单列表
                                </a>
                            </li>

                            <li id="charts-morris">
                                <a href="all-charts-morris.html">
                                    <i class="fa fa-circle-o"></i> 秒杀订单列表
                                </a>
                            </li>

                        </ul>
                    </li>



                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-laptop"></i> <span>系统设置</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">

                            <li id="elements-general">
                                <a href="all-elements-general.html">
                                    <i class="fa fa-circle-o"></i> 省市县管理
                                </a>
                            </li>

                            <li id="elements-icons">
                                <a href="all-elements-icons.html">
                                    <i class="fa fa-circle-o"></i> 数据字典
                                </a>
                            </li>

                            <li id="elements-buttons">
                                <a href="all-elements-buttons.html">
                                    <i class="fa fa-circle-o"></i> 系统配置
                                </a>
                            </li>

                        </ul>
                    </li>



                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-edit"></i> <span>日志管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">

                            <li id="form-general">
                                <a href="log-datalist.html">
                                    <i class="fa fa-circle-o"></i> 系统日志
                                </a>
                            </li>

                            <li id="form-advanced">
                                <a href="all-form-advanced.html">
                                    <i class="fa fa-circle-o"></i> 告警日志
                                </a>
                            </li>

                        </ul>
                    </li>

                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>
        <!-- 导航侧栏 /-->

        <!-- 内容区域 -->
        <div class="content-wrapper">

            <!-- 内容头部 -->
            <section class="content-header">
                <h1>
                    商品查询
                    <small>数据列表</small>
                </h1>

                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i>商品管理</a></li>
                    <li class="active">商品列表</li>
                </ol>
            </section>
            <!-- 内容头部 /-->

            <!-- 正文区域 -->
            <section class="content">

                <!-- .box-body -->
                <div class="box box-primary">
                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        商品名称 :  <input type="text" v-model="searchEntity.name" class="form-control input-sm" placeholder="商品名称">&nbsp;&nbsp;
                                        副 标 题 :  <input type="text" v-model="searchEntity.caption" class="form-control input-sm" placeholder="副标题">&nbsp;&nbsp;
                                        品   牌 :
                                        <select class="form-control" v-model="searchEntity.brandId" style="width: 150px">
                                            <option></option>
                                            <option value="8557">华为</option>
                                        </select>

                                        审核状态 :
                                        <select class="form-control" v-model="searchEntity.status" style="width: 150px">
                                            <option></option>
                                            <option value="0">未审核</option>
                                            <option value="1">已审核</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="box-tools pull-right">
                                <div class="has-feedback">
                                    <button type="button" class="btn btn-primary" title="查询" @click="page=1;search()"> 查询 <i class="fa  fa-search"></i></button>
                                    <button type="button" class="btn btn-primary" title="清空" @click="page=1;searchEntity={}"> 清空 <i class="fa  fa-search"></i></button>
                                </div>
                            </div>
                            <!--工具栏/-->

                            <!--数据列表-->
                            <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                <tr>
                                    <th class="" style="padding-right:0px;">
                                        <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                    </th>
                                    <th class="">商品ID</th>
                                    <th class="">名称</th>
                                    <th class="">审核状态</th>
                                    <th class="">上架状态</th>
                                    <th class="">操作</th>
                                </tr>
                                </thead>

                                <tbody>
                                <tr v-for="spu in dataList.rows">
                                    <td><input name="ids" type="checkbox"></td>
                                    <td>{{spu.id}}</td>
                                    <td>{{spu.name}}</td>
                                    <td>{{checkStatus[spu.status]}}</td>
                                    <td>{{marketStatus[spu.isMarketable]}}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn bg-olive btn-xs">详情</button>
                                    </td>
                                </tr>

                                </tbody>
                            </table>


                        </div>

                        <!-- /.box-body -->
                        <!--<nav aria-label="">
                            <ul class="pager">
                                <li v-if=" page > 1 "><a href="#" @click="pageHandler(page-1)">上一页</a></li>
                                <li><a href="#" @click="pageHandler(page+1)">下一页</a></li>
                                <li>当前页码 : {{page}}</li>
                            </ul>
                        </nav>-->
                        <!-- /.box-footer-->

                    </div>





                    <div class="wrap" id="wrap">
                        <zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total" v-on:pagehandler="pageHandler"></zpagenav>
                    </div>


                </div>

            </section>
            <!-- 正文区域 /-->

        </div>
        <!-- @@close -->
        <!-- 内容区域 /-->

        <!-- 底部导航 -->
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b>Version</b> 1.0.0
            </div>
            <strong>Copyright &copy; 2014-2019 <a href="http://www.itcast.cn">传智播客 - 黑马程序员</a>.</strong> All rights reserved.
        </footer>
        <!-- 底部导航 /-->
    </div>
</div>


<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    　　<div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
    　　　　<h3 id="loadText" style="color: white">loading...</h3>
    　　</div>
</div>




<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/iCheck/icheck.min.js"></script>
<script src="/plugins/adminLTE/js/app.min.js"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            dataList:[],
            checkStatus:['未审核','已审核'],
            marketStatus:['下架','上架'],
            searchEntity:{

            },
            page:1,
            pageSize:10,
            total:0
        },
        methods: {
            pageHandler: function (page) {
                this.page=page;
                if(page<=0){
                    return;
                }
                this.search();
            },

            search: function () {
                var _this = this;
                this.showLoading();
                axios.post('http://localhost:8001/goods/spu/search/'+_this.page+'/' + _this.pageSize, _this.searchEntity).then(function (response) {
                    if (response) {
                        _this.dataList = response.data.data;
                        _this.total = response.data.data.total;
                        _this.hideLoading();
                    }
                })
            },

            showLoading: function () {
                $('#loadingModal').modal({backdrop: 'static', keyboard: false});
            },

            hideLoading: function () {
                $('#loadingModal').modal('hide');
            },
        },

        created:function(){
            this.pageHandler(1);
        }
    });

</script>
</body>

</html>
